//载入基础页面
{extend name="common/base" /}

//页面单独CSS
{block name="CustomCSS"}
<link rel="stylesheet" type="text/css" href="__STATIC__/vendors/css/animate/animate.min.css">
<link rel="stylesheet" href="__STATIC__/vendors/css/bootstrap-select/bootstrap-select.min.css">
{/block}

//页面单独JS
{block name="CustomJS"}
<script src="__STATIC__/vendors/js/validation/validation.min.js"></script>
<script src="__STATIC__/vendors/js/jquery.form/jquery.form.min.js"></script>
<script src="__STATIC__/vendors/js/noty/noty.min.js"></script>
<script src="__STATIC__/vendors/js/daterangepicker/moment.min.js"></script>
<script src="__STATIC__/vendors/js/daterangepicker/daterangepicker.js"></script>
<script src="__STATIC__/vendors/js/bootstrap-select/bootstrap-select.min.js"></script>
<script src="__STATIC__/vendors/js/bootstrap-select/i18n/defaults-zh_CN.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        //日期选择器载入
        $('#create_date').daterangepicker({
            singleDatePicker: true,
            locale: {
                format:'YYYY-MM-DD',
            }
        });

        //提交表格
        $("#ajaxForm").ajaxForm({
            //定义返回JSON数据，还包括xml和script格式
            dataType: 'json',
            //在发送之前进行的操作，如果有问题，返回false即可不会进行提交
            beforeSend: function () {
                //定义 form为当前表格
                const form = $("#ajaxForm")

                //如果没有完成校验就返回false不提交
                if (form[0].checkValidity() === false){
                    return false;
                }
            },
            success: function (data) {
                //提交成功后调用
                new Noty({
                    type: "success",
                    layout: "topRight",
                    text: "成功修改一条数据，ID为" + data,
                    progressBar: true,
                    timeout: 2500,
                    animation: {
                        open: "animated bounceInRight",
                        close: "animated bounceOutRight"
                    },
                    callbacks: {
                        afterShow: function() {
                            $(location).attr('href', '{:url('Showroom/index')}');
                        },
                    }
                }).show();
                return false;
            },
            error: function(XmlHttpRequest, textStatus, errorThrown){  
                //提交成功后调用
                new Noty({
                    type: "error",
                    layout: "topRight",
                    text: "数据修改失败",
                    progressBar: true,
                    timeout: 2500,
                    animation: {
                        open: "animated bounceInRight",
                        close: "animated bounceOutRight"
                    }
                }).show();
                return false;
            } 
        });

        //如果focus_select有变化，赋值给隐藏input
        $('#focus_select').change(function(){
            var value = $('#focus_select').val();
            $('#focus_input').val(value);
        })

        //如果车系有变化，拉取配置信息
        $("#vehicle").change(function(){
            getConfig();
        });

        //获取之前的数据并赋值
        query();
    });

    //获取配置信息，如传入值，则赋值
    function getConfig(selected){

        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "{:url('Car/carConfigJson',['vehicle'=>''])}"+$("#vehicle").val(),
            //请求成功
            success : function(config_data) {
                // var config_data = $.parseJSON(result);
                //删除市的原有option
                $('#config').empty();
                //添加option
                $.each(config_data, function(index,item) {
                    $('<option value="' + item + '">' + item + '</option>').appendTo('#config');
                });
                if(selected){
                    $('#config').val(selected);
                }
                console.log(selected);
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }

    //获取此前数据
    function query(){
        //获取此前客户信息
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "{:url('Showroom/repeatJson',['type' =>'edit','id' => ''])}"+{$id},
            //请求成功
            success : function(data) {
                if(data == 0){
                    new Noty({
                        type: "success",
                        layout: "topRight",
                        text: "id错误，没有查到这个客户的信息",
                        progressBar: true,
                        timeout: 2500,
                        animation: {
                            open: "animated bounceInRight",
                            close: "animated bounceOutRight"
                        }
                    }).show();
                }else{
                    //将上次数据赋值
                    $("#sales_select").val(data.sales);
                    $("#name").val(data.name);
                    $("#sex").val(data.sex);
                    $("#features").val(data.features);
                    $("#contact").val(data.contact);
                    $("#phone").val(data.phone);
                    $("#type").val(data.type);
                    $("#invite").val(data.invite);
                    $("#create_date").val(data.create_date);
                    $("#length").val(data.length);
                    $("#sources").val(data.sources);
                    $("#origin").val(data.origin);
                    $("#vehicle").val(data.vehicle);
                    getConfig(data.config);
                    //设置foucs多选
                    $("#focus_select").selectpicker('val',data.focus);
                    $("#focus_select").selectpicker('refresh');

                    $('#focus_input').val(data.focus);
                    $("#competitor").val(data.competitor);
                    $("#order").val(data.order);
                    $("#try").val(data.try);
                    $("#detail").val(data.detail);

                    console.log(data);
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }
</script>
{/block}

//页面显示名称
{block name="PageName"}
修改展厅客户信息
{/block}

//主页面代码
{block name="main"}
<div class="row">
    <div class="col-xl-12">
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h2>修改展厅客户信息</h2>
            </div>
            <div class="widget-body">
                <form class="needs-validation" novalidate="" id="ajaxForm" action="{:url('showroom/update',['id'=> $id])}">
                    <div class="form-group row">
                        <label class="col-xl-3 form-control-label">接待人员</label>
                        <div class="form-group col-xl-9">
                            <div class="input-group">
                                <span class="input-group-addon addon-primary">销售顾问*</span>
                                <select class="form-control" name="sales" id="sales_select" required>
                                    <option></option>
                                    {volist name="sales" id="sales"}
                                    <option value="{$sales}">{$sales}</option>
                                    {/volist}
                                </select>
                                <div class="invalid-feedback">
                                    请选择接待的销售顾问
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-xl-3 form-control-label">客户信息</label>
                        <div class="form-group col-xl-9">
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">姓氏*</span>
                                        <input type="text" placeholder="请输入客户名称" class="form-control" required name="name" id="name">
                                        <div class="invalid-feedback">
                                            请输入客户姓氏
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">性别*</span>
                                        <select class="form-control" name="sex" id="sex">
                                            <option value=1>先生</option>
                                            <option value=0>女士</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            请选择客户性别
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">特征</span>
                                        <input type="text" placeholder="可以输入客户特征帮助记忆，最长二十个字" class="form-control" name="features" id="features" maxlength="20" >
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-6">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">联系方式*</span>
                                        <select class="form-control" name="contact" id="contact" required>
                                            <option value="电话">电话</option>
                                            <option value="微信">微信</option>
                                            <option value="其它">其它</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            请选择客户联系方式
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">电话</span>
                                        <input type="text" placeholder="请输入客户电话" class="form-control" name="phone" id="phone" minlength="11" maxlength="11">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-6">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">来店次数*</span>
                                        <select class="form-control" name="type" id="type" required>
                                            <option></option>
                                            <option value="首次">首次来店</option>
                                            <option value="再次">再次来店</option>
                                            <option value="三次或以上">三次或以上来店</option>
                                            <option value="交车">交车</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            请选择客户来店的类型
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">邀约*</span>
                                        <select class="form-control" name="invite" id="invite" required>
                                            <option></option>
                                            <option value=1>是</option>
                                            <option value=0>否</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            请选择客户是否邀约
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-xl-3 form-control-label" for="create_date">客户来店时间</label>
                        <div class="col-xl-9">
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">日期*</span>
                                        <input type="date" class="form-control" id="create_date" placeholder="选择日期" required name="create_date">
                                        <div class="invalid-feedback">
                                            请输入客户来店的日期
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">接待时长*</span>
                                        <select class="form-control" name="length" id="length" required>
                                            <option></option>
                                            <option value="30">30</option>
                                            <option value="60">60</option>
                                            <option value="90">90</option>
                                            <option value="120">120</option>
                                            <option value="180">120以上</option>
                                        </select>
                                        <span class="input-group-addon addon-primary">分钟</span>
                                        <div class="invalid-feedback">
                                            请选择客户停留的时长
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-xl-3 form-control-label">客户类别与来源</label>
                        <div class="form-group col-xl-9">
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">类别*</span>
                                        <select class="form-control" name="sources" id="sources" required>
                                            <option></option>
                                            <option value="展厅">展厅</option>
                                            <option value="汽车之家">网销-汽车之家</option>
                                            <option value="汽车之家">网销-易车网</option>
                                            <option value="定展">定展</option>
                                            <option value="车展">车展</option>
                                            <option value="其它">其它</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            请选择客户类别
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">信息来源*</span>
                                        <select class="form-control" name="origin" id="origin" required>
                                            <option></option>
                                            <option value="线下广告">线下广告</option>
                                            <option value="线上广告">线上广告</option>
                                            <option value="朋友介绍">朋友介绍</option>
                                            <option value="自主了解">自主了解</option>
                                            <option value="其它">其它</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            请选择客户信息来源
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-xl-3 form-control-label">关注车型</label>
                        <div class="form-group col-xl-9">
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">车型*</span>
                                        <select class="form-control" name="vehicle" id="vehicle" required>
                                            <option></option>
                                            {volist name="vehicle" id="vehicle"}
                                            <option value="{$vehicle}">{$vehicle}</option>
                                            {/volist}
                                        </select>
                                         <div class="invalid-feedback">
                                            请选择客户关注车型
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">配置</span>
                                        <select class="form-control" name="config" id="config">
                                            <option>请先选择车型</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">关注点</span>
                                        <select class="form-control selectpicker show-menu-arrow" multiple data-actions-box="true" id="focus_select" required="required">
                                            <option value="空间">空间</option>
                                            <option value="操控">操控</option>
                                            <option value="动力">动力</option>
                                            <option value="配置">配置</option>
                                            <option value="外观">外观</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            请选择客户关注点
                                        </div>
                                        <input type="text" name="focus" id="focus_input" hidden/>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">竞品</span>
                                        <input type="text" placeholder="请输入客户关注的竞品，车型即可" class="form-control" name="competitor" id="competitor">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-xl-3 form-control-label">订单签订情况</label>
                        <div class="form-group col-xl-9">
                            <div class="row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">试驾*</span>
                                        <select class="form-control" name="try" id="try" required>
                                            <option></option>
                                            <option value=0>未试驾</option>
                                            <option value=1>已试驾</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            请选择试驾情况
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">订单*</span>
                                        <select class="form-control" name="order" id="order" required>
                                            <option></option>
                                            <option value=0>未签订订单</option>
                                            <option value=1>签订订单</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            请选择订单签订情况
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-xl-3 form-control-label">接待情况</label>
                        <div class="form-group col-xl-9">
                            <div class="row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">备注*</span>
                                        <textarea class="form-control"  name="detail" id="detail" rows="3" required placeholder="请输入接待备注"></textarea>
                                        <div class="invalid-feedback">
                                            请输入接待备注
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-right">
                        <button class="btn btn-shadow" type="reset" onclick="history.go(-1);">取消</button>
                        <button class="btn btn-gradient-01" type="submit">提交</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- End Export -->
    </div>
</div>

{/block}//主页面

//自定义Modal
{block name="Modal"}
{/block}
